<template>
	<view class="pb-16">
		<view v-for="data in fieldList" :key="data.id">
			<zx-input v-if="data.type=='Input'
				|| data.type=='Phone' 
				|| data.type=='Password' 
				|| data.type=='Textarea'" :data="data" @fieldValueChange="fieldValueChange"></zx-input>
			<zx-radio v-else-if="data.type=='Radio'" :data="data" @fieldValueChange="fieldValueChange"></zx-radio>
			<zx-checkbox v-else-if="data.type=='Checkbox'" :data="data" @fieldValueChange="fieldValueChange"></zx-checkbox>
			<zx-select v-else-if="data.type=='Select'" :data="data" @fieldValueChange="fieldValueChange"></zx-select>
			<!-- 时间选择 -->
			<zx-datetime v-else-if="data.type=='TimePicker'" type="datetime" :data="data" @fieldValueChange="fieldValueChange"></zx-datetime>
			<zx-datetime v-else-if="data.type=='TimePickerMultiple'" type="datetime-range" :data="data" @fieldValueChange="fieldValueChange"></zx-datetime>
			<!-- 单日期选择 -->
			<zx-datetime v-else-if="data.type=='DatePicker'" :type="data.config.type" :data="data" @fieldValueChange="fieldValueChange"></zx-datetime>
			<!-- 日期范围选择 -->
			<zx-datetime v-else-if="data.type=='DatePickerMultiple'" type="date-range" :data="data" @fieldValueChange="fieldValueChange"></zx-datetime>
			<zx-switch v-else-if="data.type=='Switch'" :data="data" @fieldValueChange="fieldValueChange"></zx-switch>
			<zx-rate v-else-if="data.type=='Rate'" :data="data" @fieldValueChange="fieldValueChange"></zx-rate>
			<zx-link v-else-if="data.type=='Link'" :data="data" ></zx-link>
			<zx-divider v-else-if="data.type=='Divider'" :data="data" ></zx-divider>
			<zx-uploader v-else-if="data.type=='Uploader'" :businessId="businessId" :data="data" @fieldValueChange="fieldValueChange"></zx-uploader>
			<zx-input-Number v-else-if="data.type=='InputNumber'" :data="data" @fieldValueChange="fieldValueChange"></zx-input-Number>
			<zx-text v-else-if="data.type=='Text'" :data="data" ></zx-text>
			<div v-else class="py-4 px-4 text-red-200">未知表单[{{data.type}}]类型，请联系管理员</div>
		</view>
	</view>
</template>
<script>
import zxInput from './field/input.vue';
import zxRadio from './field/radio.vue';
import zxCheckbox from './field/checkbox.vue';
import zxSelect from './field/select.vue';
import zxDatetime from './field/datetime.vue';
import zxSwitch from './field/switch.vue';
import zxRate from './field/rate.vue';
import zxLink from './field/link.vue';
import zxDivider from './field/divider.vue';
import zxUploader from './field/uploader.vue';
import zxInputNumber from './field/InputNumber.vue';
import zxText from './field/text.vue';
export default {
    components:{
        zxInput,
        zxRadio,
        zxCheckbox,
        zxSelect,
        zxDatetime,
        zxSwitch,
        zxRate,
        zxLink,
        zxDivider,
        zxUploader,
        zxInputNumber,
        zxText
    },
    provide() {
        return {
            getFormInfo: ()=>{
                return {busId: this.businessId, formCode: this.formCode}
            }
        }
    },
    props: {
        fieldList: {
            type: Array,
            default: function(){return []}
        },
        businessId: {
            type: String,
            require: true
        },
        formCode: {
            type: String,
            require: true
        },
    },
    methods:{
        fieldValueChange(obj){
            // console.log('======================================== fieldValueChange =========================================')
            let vm = this,form = {},editIdx = -1
            this.fieldList.forEach(function(f,index){
				let val = f.value
				if (f.id == obj.id) {
					editIdx = index
					val = obj.value
				}
                form[f.name] = val
            })
			if (editIdx > -1) {
				this.fieldList[editIdx] = obj
				this.$emit('updateList', this.fieldList)
			}
            function setFieldValue(name, value){
                let fields = vm.fieldList.filter(e=> e.name == name)
                fields.forEach(e=>{
                    e.value = value
                })
            }
            if (obj.changeFun) {
                try {
                    eval(obj.changeFun)
                } catch (err) {
                    console.error(err)
                }
            }
        }
    }
}
</script>
